<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function queryEle() {
				// 1.通过id定位元素
				var div1 = document.getElementById('div1')
				console.log(div1.innerHTML)
				// 2.通过类名获取元素的集合，可以当作数组来用
				var aaa = document.getElementsByClassName('aaa')
				console.log(aaa[0]) // 第一个元素
				console.log(aaa.item(1)) // 第二个元素
				console.log(aaa.length) // 元素个数
				console.log(aaa.item(aaa.length - 1)) // 最后一个元素
				// 3.通过标签名获取元素的集合，不打乱文档顺序
				var p = document.getElementsByTagName('p')
				console.log(p.item(0).innerText)
				// 4.根据选择器，返回匹配的第一个元素
				var div_p = document.querySelector('div>p')
				console.log(div_p)
				// 5.根据选择器，返回匹配的所有元素集合
				var div_ps = document.querySelectorAll('div>p')
				console.log(div_ps)
				console.log(div_ps.item(1))
				// 修改内部的html
				div_ps.item(1).innerHTML = 
				"<a href='https://www.baidu.com'>百度首页</a>"
				div_ps.item(1).id = 'p2' // 添加id
				div_ps.item(0).className = 'bbb ccc' // 修改class
				div_ps.item(0).classList.remove('ccc')
				div_ps.item(0).classList.add('ddd')
				// 修改单个样式
				div_ps.item(1).style.backgroundColor = 'green'
				// 不生效？
				// div_ps.item(1).cssText = 'font-size: 30px'
				div1 = document.getElementById('div1')
				console.log(div1.parentElement) // 父元素
				// 子元素的集合，不包含标签内文本
				console.log(div1.children)
				// 包含文本
				console.log(div1.childNodes)
			}
		</script>
		<style>
			.bbb {
				color: red;
			}
		</style>
	</head>
	<body>
		<button onclick="queryEle()">定位元素</button>
		<div id="div1" class="aaa">
			第一个div标签
			<p>第一个div中的p标签</p>
			<p>第一个div中的p标签2</p>
			<a>第一个div中的a标签</a>
			第一个div标签的尾部文本
		</div>
		<div>第二个div</div>
		<p class="aaa">第二个p标签</p>
		<p class="aaa">第三个p标签</p>
		<p>第四个p标签</p>
		<p class="aaa">第五个p标签</p>
		<p>第六个p标签</p>
	</body>
</html>